<template>
  <el-descriptions v-if="data" :title="one.label" border class="mb-10px">
    <el-descriptions-item v-for="column in one.columns" :label="column.label" :key="column.name">
      <!-- {{ data[toCamelCase(column.name)] }} -->
      <component :is="getElement(column.type, 'read', action.elements?.[column.name]?.element)"
        v-model="data[toCamelCase(column.name)]"
        :column="column" v-bind="action.elements?.[column.name]?.elementProps"
      />
    </el-descriptions-item>
    <template #extra>
      <div v-if="Object.keys(crosses).length > 0">
        <el-button v-for="(item, cross) in crosses" :key="cross" @click="showData(data[cross], item)">
          {{ item.label }}({{ item.type == 'hasMany' ? data[cross]?.length : (data[cross] ? 1 : 0) }})
        </el-button>
      </div>
    </template>
  </el-descriptions>
</template>
<script setup lang="ts">
  import { ElDescriptions, ElDescriptionsItem, ElButton } from 'element-plus'
  import { popup } from '@/components/Popup'
  import { h } from 'vue'
  import DetailList from './DetailList.vue'
  import Detail from './Detail.vue'
  import { toCamelCase } from '@/utils/func';
  import { Action, Cross } from '@/seed-application/types'
  import { getElement } from '@/seed-application'

  const props = defineProps<{action: Action, one: Cross, data?: Record<string, any>}>()
  const one = props.one
  const data = props.data
  const crosses = one.crosses
  const action = props.action

  const showData = (data: any, cross: Cross) => {
    popup({ title: cross.label }, {
      default: () => {
        if(cross.type == 'hasMany' || cross.type == 'habtm') return h(DetailList, {many: cross, data})
        return h(Detail, {action, one: cross, data})
      }
    })
  }
</script>